<template>
  <div id="app">
    <NavBar></NavBar>
    <Word></Word>
    
        <transition :name="aniType">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </transition>
      
  </div>
</template>

<script>
import {mapState} from 'vuex'
import NavBar from './components/NavBar.vue';
import Word from './components/Word.vue';
export default {
  name: 'app',
  data(){
    return{
      aniType: ""
    }
  },
  components:{
    NavBar,
    Word,
  },
  computed:{
    ...mapState([
      
    ])
  },
  watch: {
      $route(nv, ov) {
          var nLen = nv.path.split("/").length - 1;
          var oLen = ov.path.split("/").length - 1;
          if (nLen > oLen) {
              this.aniType = "pagein";
          } else if (nLen < oLen) {
              this.aniType = "pageout";
          } else {
              this.aniType = "";
          }
      }
  }
}
</script>

<style>
#app {

}
</style>
